<template>
    <div class="clean-time">
        <Loading :show="loading"></Loading>
        <div  :key="'date' + day" v-for="(date, day) in dates" class="m-0 p-0" style="display: inline-block;">
            <div class="list-group">
                <a href="javascript:void(0)" class="list-group-item bg-primary first">{{day}}</a>
                <a  :key="'datetime' + key" v-for="(value, key) in date.time"  href="javascript:void(0)" class="list-group-item"
                   @click="setTime(day, key)"  :ref="`${day}_${key}`" :class="{'active':  value}"
                >
                    {{key}}
                </a>
            </div>
        </div>
    </div>

</template>

<script>
    import Loading from '@/components/widgets/Loading'
    import {searchModel, addModel, updateModel, deleteModel} from '@/api/model'
    export default {
        name: "CleanTime",
        components: {Loading},
        props: {
            id: {
                type: Number,
                default : 0
            },
            show: {
                type: Boolean,
                default: false
            }
        },
        created() {
            this.strToTime = {
                "morning": {
                    start: '09:00:00',
                    end: '11:00:00'
                },
                "evening": {
                    start: '14:00:00',
                    end: '18:00:00'
                },
                "all_day": {
                    start: '09:00:00',
                    end: '22:00:00'
                }
            }
            this.model = 'OkumasanCleanerTime'
            this.times = []
        },
        data() {
            return {
                dates : {
                    'Monday' : {
                        time: {
                            morning: false,
                            evening: false,
                            all_day: false
                        }
                    },
                    'Tuesday' : {
                        time: {
                            morning: false,
                            evening: false,
                            all_day: false
                        }
                    },
                    'Wednesday' : {
                        time: {
                            morning: false,
                            evening: false,
                            all_day: false
                        }
                    },
                    'Thursday' : {
                        time: {
                            morning: false,
                            evening: false,
                            all_day: false
                        }
                    },
                    'Friday' : {
                        time: {
                            morning: false,
                            evening: false,
                            all_day: false
                        }
                    },
                    'Saturday' : {
                        time: {
                            morning: false,
                            evening: false,
                            all_day: false
                        }
                    },
                    'Sunday' : {
                        time: {
                            morning: false,
                            evening: false,
                            all_day: false
                        }
                    },
                },
                currentTime: '',
                loading: false
            }
        },
        methods: {
            init() {
                this.loading = true
                searchModel(this.model, {"search_keys": {"okumasan_cleaner_id":this.id}}).then( res => {
                    this.dates = {
                        'Monday' : {
                            time: {
                                morning: false,
                                evening: false,
                                all_day: false
                            }
                        },
                        'Tuesday' : {
                            time: {
                                morning: false,
                                evening: false,
                                all_day: false
                            }
                        },
                        'Wednesday' : {
                            time: {
                                morning: false,
                                evening: false,
                                all_day: false
                            }
                        },
                        'Thursday' : {
                            time: {
                                morning: false,
                                evening: false,
                                all_day: false
                            }
                        },
                        'Friday' : {
                            time: {
                                morning: false,
                                evening: false,
                                all_day: false
                            }
                        },
                        'Saturday' : {
                            time: {
                                morning: false,
                                evening: false,
                                all_day: false
                            }
                        },
                        'Sunday' : {
                            time: {
                                morning: false,
                                evening: false,
                                all_day: false
                            }
                        },
                    }
                    this.times = res.data.list
                    res.data.list.forEach( item => {
                        if (this.dates[item.weekday]) {
                            for (let key in this.dates[item.weekday].time) {
                                this.$nextTick( () => {
                                    this.dates[item.weekday].time[key] = false
                                } )
                            }
                            this.$nextTick( () => {
                                this.dates[item.weekday].time[item.time] = true
                            } )
                        }
                    } )
                    this.loading = false
                } ).catch( e => {
                    this.loading = false
                })

            },
            setTime(day, time) {
                let id = this.getId(day, time)
                this.loading = true
                if (this.dates[day].time[time]) {  // 取消选择
                    deleteModel(this.model, id).then(res => {
                        this.loading = false
                        this.init()
                    }).catch(e => {})
                } else {
                    if (id) {
                        updateModel(this.model, id, {
                            weekday: day,
                            start_time: this.strToTime[time].start,
                            end_time: this.strToTime[time].end
                        }).then( res => {
                            this.loading = false
                            this.init()
                        } )
                    } else {
                        addModel(this.model, {
                            okumasan_cleaner__id: this.id,
                            weekday: day,
                            start_time: this.strToTime[time].start,
                            end_time: this.strToTime[time].end
                        }).then( res => {
                            this.loading = false
                            this.init()
                        } )
                    }
                }

            },
            getId(day, time) {
                let id = null
                this.times.forEach( item => {
                    if (item.weekday === day) {
                        id = item.id
                    }
                } )

                return id
            }
        },
        watch: {
            'show'() {
               if (this.show) {
                    this.init()
               }
            }
        }
    }
</script>

<style scoped lang="stylus">
    .clean-time
        .list-group
            .list-group-item
                padding : 5px !important;
                font-size: 12px !important;
                &.first
                    cursor :default;
                    color : #fff !important;
</style>